<template>
  <div class="rank">
    <van-tabs v-model="active" scrollspy sticky>
      <div class="frame">
        <van-tab title="官方">
          <h1 class="top">官方榜</h1>
          <div class="index-list">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in musei"
              :key="index"
            >
              <div class="index-list-item index-list-one">
                <div class="index-list-img">
                  <img :src="item.coverImgUrl" alt="" />
                  <span>{{ item.updateFrequency }}</span>
                </div>
                <div class="index-list-text">
                  <div v-for="(item, index) in item.tracks" :key="index">
                    {{ index + 1 }} . {{ item.first }}-{{ item.second }}
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </van-tab>
      </div>

      <div class="frame">
        <van-tab title="云音乐">
          <h1 class="top">云音乐榜</h1>
          <div class="index-list index-list-two aa">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in m"
              :key="index"
            >
              <div class="index-list-im">
                <img :src="item.coverImgUrl" alt="" />
                <span>{{ item.updateFrequency }}</span>
                <p class="ming">{{ item.name }}</p>
              </div>
            </router-link>
          </div>
        </van-tab>
      </div>

      <div class="frame">
        <van-tab title="曲风">
          <h1 class="top">曲风榜</h1>
          <div class="index-list index-list-two aa">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in mu"
              :key="index"
            >
              <div class="index-list-i">
                <img :src="item.coverImgUrl" alt="" />
                <span>{{ item.updateFrequency }}</span>
                <p class="ming">{{ item.name }}</p>
              </div>
            </router-link>
          </div>
        </van-tab>
      </div>

      <div class="frame">
        <van-tab title="全球">
          <h1 class="top">全球榜</h1>
          <div class="index-list index-list-two">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in mus"
              :key="index"
            >
              <div class="index-list-img">
                <img :src="item.coverImgUrl" alt="" />
                <span>{{ item.updateFrequency }}</span>
              </div>
              <p class="ming zi">{{ item.name }}</p>
            </router-link>
          </div>
        </van-tab>
      </div>

      <div class="frame">
        <van-tab title="MV">
          <h1 class="top">MV榜</h1>
          <div class="index-list index-list-two">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in muse"
              :key="index"
            >
              <div class="index-list-img">
                <img :src="item.coverImgUrl" alt="" />
                <span>{{ item.updateFrequency }}</span>
              </div>
              <p class="ming zi">{{ item.name }}</p>
            </router-link>
          </div>
        </van-tab>
      </div>

      <div class="frame frame_1">
        <van-tab title="特色">
          <h1 class="top">特色榜</h1>
          <div class="index-list index-list-two">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in nusei"
              :key="index"
            >
              <div class="index-list-img">
                <img :src="item.coverImgUrl" alt="" />
                <span>{{ item.updateFrequency }}</span>
              </div>
              <p class="ming zi">{{ item.name }}</p>
            </router-link>
          </div>
        </van-tab>
      </div>
      <br />
      <br />
    </van-tabs>
  </div>
</template>

<script>
import { ToplistAPI } from "../../api/home";
export default {
  name: "Cart",
  data() {
    return {
      active: "",
      musei: [],
      m: [],
      mu: [],
      mus: [],
      muse: [],
      nusei: [],
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      let { data } = await ToplistAPI();
      console.log(data);
      if (data.code === 200) {
        for (let i = 0; i < data.list.length; i++) {
          if (data.list[i].tracks.length !== 0) {
            this.musei.push(data.list[i]);
          } else if (data.list[i].userId === 1) {
            if (this.m.length < 6) {
              this.m.push(data.list[i]);
            } else {
              if (this.mu.length < 9) {
                this.mu.push(data.list[i]);
              } else {
                this.nusei.push(data.list[i]);
              }
            }
          } else {
            if (this.mus.length < 11) {
              this.mus.push(data.list[i]);
            } else {
              if (this.muse.length < 9) {
                this.muse.push(data.list[i]);
              }
            }
          }
        }
      }
    },

    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
.cart {
  display: flex;
  flex-direction: column;
}
.top {
  font-size: 20px;
  text-align: center;
}
.index-search {
  display: flex;
  align-items: center;
  height: 35px;
  margin: 35px 15px 15px 15px;
  background: #f7f7f7;
  border-radius: 25px;
}
.index-search span {
  font-size: 13px;
  margin-right: 13px;
  margin-left: 14px;
  overflow: hidden;
}
.index-search input {
  font-size: 14px;
  flex: 1;
}
.index-list {
  margin: 0 15px;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.index-list-item {
  display: flex;
  margin-bottom: 15px;
}
.index-list-img {
  height: 106px;
  position: relative;
  overflow: hidden;
  margin-right: 11px;
}
.index-list-img img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  margin: 7px 0px 0px 7px;
}
.index-list-img span {
  position: absolute;
  left: 8px;
  bottom: 11px;
  color: white;
  font-size: 10px;
  text-align: center;
  width: 90px;
  display: block;
}

.index-list-im span {
  position: relative;
  left: 8px;
  bottom: 23px;
  color: white;
  font-size: 10px;
  text-align: center;
  width: 90px;
  display: block;
}

.index-list-i span {
  position: relative;
  left: 8px;
  bottom: 23px;
  color: #ffffff;
  color: white;
  font-size: 10px;
  text-align: center;
  width: 90px;
  display: block;
}

.index-list-im img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  margin: 7px 0px 0px 7px;
}

.index-list-i img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  margin: 7px 0px 0px 7px;
}

.index-list-text {
  font-size: 12px;
  line-height: 30px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  width: 80%; /*需要配合宽度来使用*/
  margin-top: 10px;
  color: #000;
  flex: 1;
}
.index-list a .index-list-one {
  border-radius: 7px;
  background-color: #fff;
  box-shadow: 0px 0px 8px 1px rgb(245, 245, 245);
}
/* .index-list a .index-list-one:hover{
  transform: scale(1.05,1.05);
  box-shadow: 0px 0px 8px 1px rgb(218, 218, 218);
} */
/* .index-list-two {
  margin-right: 20px;
} */
.van-tabs__line {
  border-radius: 10px;
  height: 5px;
}
.van-tabs--line .van-tabs__wrap {
  height: 35px;
}
.van-tab__text {
  font-weight: bolder;
}
.top {
  font-weight: 900;
  text-align: left;
  margin-left: 20px;
  padding: 10px;
}
.frame {
  display: flex;
  margin: 10px auto;
  border-radius: 10px;
  background-color: #fff;
}
.frame_1 .van-tab__pane {
  margin-bottom: 20px;
}
.van-nav-bar__text {
  color: #484848;
  font-size: 15px;
  font-weight: bolder;
}
.van-nav-bar__right {
  height: 30px;
  border: 1px solid #ffffff;
  border-radius: 25px 25px 25px 25px;
  width: 30px;
  margin-top: 7px;
  margin-right: 10px;
  font-weight: bolder;
  box-shadow: 0px 0px 8px 1px rgb(235, 236, 236);
}

.van-nav-bar .van-icon {
  color: #000;
  font-size: 15px;
}

.van-icon-arrow-left:before {
  font-size: 17px;
  font-weight: bolder;
}

.ming {
  width: 90px;
  text-align: left;
  position: relative;
  bottom: 15px;
  left: 10px;
  font-size: 14px;
  color: #000;
}
.zi {
  position: relative;
  bottom: 4px;
}
.aa a {
  margin-right: 10px;
}
</style>
